<template>
  <div class="fs-button" ref="fcButton">
    <el-button v-for="(item, index) in buttons" :key="index"
               :plain="plain"
               :round="round"
               :circle="circle"
               :size="size"
               v-auth="item.permission?menuCode+item.permission:false"
               :type="item.type?item.type:'primary'"
               :icon="item.icon?item.icon:''"
               :disabled="item.disabled?item.disabled:false"
               :style="{ 'width': item.width,'display': item.show }"
               :loading="this.loadings[index]"
               :color="item.color"
               @click="item.click?handler(index,item.click):null">

      <span v-if="!item.parent"> {{ item.name }}</span>

      <el-popover v-if="item.parent" trigger="click" placement="bottom" width="auto"
      style="padding: 0px !important;" popper-class="buttonpopover">
					<template #default>
						<div class="buttoncontextmenu" v-if="isParentBorder==false">
              <el-button v-for="(item2, index) in item.childrenbuttons" :key="index"
              link
              :plain="plain"
               :round="round"
               :circle="circle"
               :size="size"
               :type="item2.type?item2.type:'primary'"
              v-auth="item2.permission?menuCode+item2.permission:false"
              :icon="item2.icon?item2.icon:''"
               :disabled="item2.disabled?item2.disabled:false"
               :style="{ 'width': item2.width,'display': item2.show }"
               :color="item2.color"
              @click="item2.click?handler(index,item2.click):null"> {{ item2.name }}</el-button>
            </div>
            <div class="buttoncontextmenu" v-else>
              <el-button v-for="(item2, index) in item.childrenbuttons" :key="index"
              :plain="plain"
               :round="round"
               :circle="circle"
               :size="size"
               :type="item2.type?item2.type:'primary'"
              v-auth="item2.permission?menuCode+item2.permission:false"
              :icon="item2.icon?item2.icon:''"
               :disabled="item2.disabled?item2.disabled:false"
               :style="{ 'width': item2.width,'display': item2.show }"
               :color="item2.color"
              @click="item2.click?handler(index,item2.click):null"> {{ item2.name }}</el-button>
            </div>
						</template>
						<template #reference>
              <div>
             {{ item.name }}
             <el-icon v-if="item.name!='...' && item.icon!='el-icon-more-filled'">
						    <component is="el-icon-arrow-down"></component>
			      </el-icon>
          </div>
					</template>
				</el-popover>

    </el-button>
  </div>

</template>

<script>
export default {
  emits: ['clickHandler'],
  props: {
    plain: {type: Boolean, default: true},
    round: {type: Boolean, default: false},
    circle: {type: Boolean, default: false},
    size: {type: String, default: "default"},// default,large,small
    buttons: {type: Array, default: null},
    color:{type: String, default: "#427CFF"},
    isParentBorder:{type: Boolean, default: false}


  },
  data() {
    return {
      loadings: [],
      childrenbuttons:null,
    }
  },
  computed:{
    menuCode:function(){
      let breadcrumb = this.$router.currentRoute.value.meta.breadcrumb;
      return breadcrumb[breadcrumb.length-1].code;
    },
  },
  methods: {
    handler(index, methodName) {
      this.$emit("clickHandler", index, methodName);
    },

    loading(index, value) {
      this.loadings[index] = value;
    },
  }
}
</script>
<style>
.buttonpopover{
  padding: 0 !important;
  padding-left: 5px !important;
  min-width: 120px !important;
}
.buttoncontextmenu {
		width: 70px;
		margin:0;
		border-radius: 0px;
		background: var(--el-bg-color-overlay);
		border: 0px solid var(--el-border-color-light);
		z-index: 3000;
		list-style-type: none;
		padding: 10px 0;
		padding-top: 10px;
	}
	.buttoncontextmenu hr {
		margin:5px 0;
		border: none;
		height: 1px;
		font-size: 0px;
		background-color: var(--el-border-color-light);
	}
	.buttoncontextmenu .el-button {
		display: flex;
		align-items: center;
		margin:0;
		cursor: pointer;
		padding: 6px 15px !important;

    border-radius: 4px !important;
	}
	.buttoncontextmenu .el-button span {
		font-size: 14px;
		margin-right: 10px;
    color: #606266;
	}
	::v-deep(.buttoncontextmenu .el-button:hover,.buttoncontextmenu .el-button:hover span){
		background-color: rgb(238, 241, 255) !important;
		color: #427CFF !important;
	}
	.buttoncontextmenu .el-button.disabled,.buttoncontextmenu .el-button.disabled span{
		cursor: not-allowed;
		color: #bbb;
		background: transparent;
	}

  .buttoncontextmenu .el-button.is-link:hover {
    background-color: rgb(238, 241, 255) !important;
  }

  .buttoncontextmenu .el-button.is-link:hover span {
    background-color: rgb(238, 241, 255) !important;
    color: #427CFF !important;
  }


</style>
